<template>
	<div class="activity">
	  <!--加载中-->
	  <div class="loading" v-if="status === 'loading'">
	  	<v-loading></v-loading>
	  </div>
		<!--有商城活动消息-->
		<div class="content" v-if="status === 'complete'">
			<section class="item" v-for="item in contents">
				<div class="image">
					<img :src="item.img_url" :alt="item.title">
				</div>
				<div class="text">
					<div class="title">
						{{ item.title }}
						<div class="time">
							{{ item.create_time*1000 | date }}
						</div>
					</div>
					<p class="detail">{{ item.content }}</p>
					<div class="activity-time"></div>
					<a :href="item.href_url" class="btn">{{$tc('message.detail', 2)}}</a>
				</div>
			</section>
			<v-pager class="pager" :activeIndex="activeIndex" :pageNum="pageNum" :total="total" @change-page="changePage"></v-pager>
		</div>
		<!--无商城活动消息-->
		<div class="personal-activity-null" v-if="status === 'null'">
			<div class="personal-activity-null-illustration"></div>
			<div class="personal-activity-null-text">
				{{ $t('message.noActivityInfo') }}
			</div>
		</div>
	</div>
</template>

<script>
import VLoading from '@/components/base/VLoading'
import VPager from '@/components/base/VPager'

export default {
  name: 'PersonalMessageActivity',
  components: {
    VPager,
    VLoading
  },
  data () {
    return {
      activeIndex: 1,
      status: 'complete',
      contents: [],
      pageNum: 1,
      total: 0
    }
  },
  methods: {
    changePage (currentPageNum) {
      this.activeIndex = currentPageNum
//      console.log(this.activeIndex)
      this.getMessage()
    },
    // 商城活动接口
    getMessage () {
      this.status = 'loading'
      this.$ajax.shopActivity({
        number: 5,
        page: this.activeIndex
      }).then((res) => {
        if (res.code === 200) {
          this.contents = res.data.content
          this.pageNum = res.data.page_count
          this.total = res.data.item_count
          this.status = 'complete'
          document.documentElement.scrollTop = 160
          document.body.scrollTop = 160
        } else if (res.code === 202) {
          this.status = 'null'
        } else if (res.code === 301) {
          this.$router.push({path: '/login', query: {redirect: this.$route.fullPath}})
        }
      })
    }
  },
  created () {
    this.getMessage()
  }
}
</script>

<style scoped>
.activity {
}

.content {
}

.loading {
  margin-top: 160px;
}

.item {
	height: 185px;
	padding: 40px 0;
	border-bottom: 1px solid #e6e6e6;
	overflow: hidden;
}

.item:last-of-type {
  border-bottom: none;
}

.image {
	float: left;
	width: 300px;
	height: 185px;
	text-align: center;
	overflow: hidden;
}

.image img {
	display: inline-block;
	height: 100%;
	margin: 0 auto;
}

.text {
	float: left;
	width: 540px;
	margin-left: 24px;
}

.title {
	line-height: 30px;
	font-size: 22px;
	color: #333;
	font-weight: bold;
	margin-bottom: 16px;
}

.time {
	float: right;
	line-height: 20px;
	font-size: 14px;
	color: #a5a5a5;
	font-weight: normal;
	margin-top: 10px;
}

.detail {
	width: 540px;
	height: 78px;
	color: #666;
	line-height: 26px;
	margin-bottom: 25px;
}

.btn {
	display: inline-block;
  padding: 0 10px;
	height: 34px;
	line-height: 34px;
	border: 1px solid #a5a5a5;
	color: #666;
	text-align: center;
	font-size: 14px;
}

.btn:hover {
	background: #ff600a;
	color: #fff;
	border: 1px solid #ff600a;
}

.pager {
	margin-top: 40px;
}

.personal-activity-null {
	padding: 100px 0 398px;
}

.personal-activity-null-illustration {
	width: 300px;
	height: 200px;
	margin: 0 auto;
	background: url(../../../assets/images/personal/illustration_message.png) no-repeat center;
}

.personal-activity-null-text {
	height: 22px;
	line-height: 22px;
	font-size: 16px;
	color: #666;
	text-align: center;
	margin-top: 10px;
}
</style>
